<template>
  <d2-container>
    <div class="tdesign-demo-block-column" style="margin-bottom: 20px">
      <!-- 只指定水平gutter，垂直默认为0 -->
      <t-row :gutter="16">
        <t-col :span="4">
          <el-card class="box-card">
            <el-descriptions title="用户信息" :column="2">
              <el-descriptions-item label="姓名">{{nameUser.name}}</el-descriptions-item>
              <el-descriptions-item label="车牌号"
                >{{nameUser.carId}}</el-descriptions-item
              >
              <el-descriptions-item label="准驾车型">A1</el-descriptions-item>
              <el-descriptions-item label="登记号码"
                >{{nameUser.phone}}</el-descriptions-item
              >
            </el-descriptions>
          </el-card>
        </t-col>
        <t-col :span="6">
          <!-- <div class="record">尚未处理记录</div> -->
          <el-card class="box-card">
            <el-descriptions title="执照信息" :column="3">
              <el-descriptions-item label="驾驶证号"
                >{{nameUser.infoId}}</el-descriptions-item
              >
              <el-descriptions-item label="驾驶证有效期"
                >{{nameUser.validityPeriod}}</el-descriptions-item
              >
              <el-descriptions-item label="下一清分日期"
                >{{nameUser.clearDate}}</el-descriptions-item
              >
              <el-descriptions-item label="下一体检日期"
                >{{nameUser.checkDate}}</el-descriptions-item
              >
              <el-descriptions-item label="数据更新日期"
                >{{nameUser.updateDate}}</el-descriptions-item
              >
              <el-descriptions-item label="执照状态">{{nameUser.state}}</el-descriptions-item>
            </el-descriptions>
            <!-- <el-descriptions :column="2">
              <el-descriptions-item label="驾驶证号"
                >1234567890</el-descriptions-item
              >
            </el-descriptions> -->
          </el-card>
        </t-col>

        <t-col :span="2">
          <!-- <div class="handle">申述</div> -->
          <el-card class="box-card">
            <el-descriptions title="违规统计" :column="1">
              <el-descriptions-item label="累计扣分">12</el-descriptions-item>
              <el-descriptions-item label="特殊加分">12</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </t-col>
      </t-row>
    </div>
<h3>申诉审核状态</h3>
    <t-table
      rowKey="index"
      :data="dataA"
      :columns="columnsA"
      :height="200"
      style="margin-bottom: 30px"
    >
    <template #pass="{ row }">
        <p v-if="row.is_pass === 0" class="status unhealth">未通过</p>
        <p v-if="row.is_pass === 1" class="status ">已通过</p>
      </template>
    </t-table>
<h3>全部违规记录</h3>
    <t-table
      rowKey="index"
      :data="dataB"
      :columns="columnsB"
      :height="200"
      style="margin-bottom: 30px"
    ></t-table>
  </d2-container>
</template>

<script>
const dataA = []
const dataB = []
const nameUser = {}
// for (let i = 0; i < 2; i++) {
//   data.push({
//     index: i,
//     platform: i % 2 === 0 ? "共有" : "私有",
//     type: ["String", "Number", "Array", "Object"][i % 4],
//     default: ["-", "0", "[]", "{}"][i % 4],
//     detail: {
//       postion: `读取 ${i} 个数据的嵌套信息值`,
//     },
//     needed: i % 4 === 0 ? "是" : "否",
//     description: "数据源",
//   });
// }
export default {
  created() {
// console.log(window.sessionStorage.userInfo)
this.nameUser = JSON.parse(window.sessionStorage.userInfo)
this.fetchDataA()
this.fetchDataB()
  },
  data() {
    return {
      token: this.$store.state.d2admin.user.token,
      nameUser,
      dataA,
      dataB,
      columnsA: [
        {
          align: 'center',
          width: '100',
          colKey: 'id',
          title: 'ID'
        },
        {
          width: 100,
          colKey: 'is_pass',
          title: '申诉状态',
          cell: 'pass'

        },
        {
          width: 150,
          colKey: 'violation.carId',
          title: '违规车牌'
        },
        {
          colKey: 'time',
          width: 200,
          title: '申诉时间'
        },
        {
          colKey: 'reason',
          width: 200,
          title: '申诉说明'
        }
      ],
      columnsB: [
        {
          align: 'center',
          width: '100',
          colKey: 'id',
          title: 'ID'
        },
        {
          width: 100,
          colKey: 'illustrate',
          title: '违规事件'
        },
        {
          width: 150,
          colKey: 'carId',
          title: '违规车牌'
        },
        {
          colKey: 'time',
          width: 200,
          title: '违规时间'
        },
        {
          colKey: 'handle',
          width: 150,
          title: '是否已违规'
        }
      ]
    }

  },
  methods: {
async fetchDataA() {

  const INFO = {
    carId: this.nameUser.carId
  }
  console.log(INFO)
const resp = await fetch('/api/violation/filterAppeal',{
method: 'POST',
headers: {
Authorization: `Bearer${this.token}`,
     'Content-Type': 'application/json'
},
body: JSON.stringify(INFO)
}).then(res => res.json())
.then(data => {
  this.dataA = data.obj
  let i = 1
  this.dataA.forEach(data => {
data.id = i
i += 1
  })
  console.log(this.dataA)
})
},
async fetchDataB() {
    const INFO = {
    carId: this.nameUser.carId
  }
  // console.log(INFO)
const resp = await fetch('/api/violation/filter',{
method: 'POST',
headers: {
Authorization: `Bearer${this.token}`,
     'Content-Type': 'application/json'
},
body: JSON.stringify(INFO)
}).then(res => res.json())
.then(data => {
  this.dataB = data.obj
  let i = 1
  this.dataB.forEach(data => {
data.id = i
i += 1
  })
  console.log(this.dataB)
})
}
}
}
</script>

<style lang="less" scoped>
.box-card {
  height: 150px;
}
/deep/ [class*='t-table-expandable-icon-cell'] .t-icon {
  background-color: transparent;
}
.link {
  cursor: pointer;
  margin-right: 15px;
}
.status {
  position: relative;
  color: #00a870;
  margin-left: 10px;
  &::before {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    content: '';
    background-color: #00a870;
    width: 6px;
    height: 6px;
    margin-left: -10px;
    border-radius: 50%;
  }
}
.status.unhealth {
  color: #e34d59;
  &::before {
    background-color: #e34d59;
  }
}
.more-detail {
  > p {
    display: inline-block;
    margin: 5px;
  }
  > p.title {
    width: 100px;
  }
}
</style>
